<script setup lang="ts">
import { useRequest } from "alova/client";

const { data, loading } = useRequest(Apis.Hotlist.page({ params: {} }));

const hotList = computed(() => data.value.data.list);

// 判断是否为“新上榜”（例如：1 小时内）
const isNew = (createdAt: string): boolean => {
    const now = new Date();
    const created = new Date(createdAt);
    const diffMs = now.getTime() - created.getTime();
    return diffMs < 1000 * 60 * 60; // 1 小时内
};

// 格式化热度（如 985000 → 98.5万）
const formatHotScore = (score: number): string => {
    if (score >= 10000) {
        return (score / 10000).toFixed(1) + "万";
    }
    return score.toString();
};
</script>

<template>
    <div class="overflow-hidden rounded-lg border border-gray-200 bg-white shadow-sm">
        <div class="bg-gradient-to-r from-red-500 to-orange-500 px-4 py-3 text-white">
            <h2 class="flex items-center text-lg font-bold">
                <svg xmlns="http://www.w3.org/2000/svg" class="mr-2 h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                    <path
                        fill-rule="evenodd"
                        d="M12.395 2.553a1 1 0 00-1.45-.385c-.345.23-.614.558-.822.918l-2.4 4.132a1 1 0 01-.822.47c-.438 0-.85-.196-1.132-.522L3.5 7.1a1 1 0 00-1.45 1.31l2.4 4.132a3 3 0 002.466 1.42c.55 0 1.078-.17 1.53-.47l2.4-1.6a1 1 0 00.538-.918V3.885a1 1 0 00-.105-.432z"
                        clip-rule="evenodd"
                    />
                </svg>
                头条热榜
            </h2>
        </div>

        <div v-if="loading" class="p-4 text-center text-gray-500">
            <span>加载中...</span>
        </div>

        <ul v-else class="divide-y divide-gray-100">
            <li
                v-for="(item, index) in hotList"
                :key="item.id"
                class="cursor-pointer px-4 py-3 transition-colors hover:bg-gray-50"
            >
                <div class="flex items-start">
                    <!-- 排名 -->
                    <span
                        class="mr-2 flex h-6 w-6 items-center justify-center text-xs font-bold"
                        :class="{
                            'text-red-500': index < 3,
                            'text-gray-500': index >= 3
                        }"
                    >
                        {{ index === 0 ? "🔥" : index + 1 }}
                    </span>

                    <!-- 标题 -->
                    <div class="flex min-w-0 flex-1 items-center gap-1">
                        <div class="flex items-start gap-1">
                            <span
                                v-if="item.isPinned"
                                class="rounded bg-red-100 px-1.5 py-0.5 text-xs font-medium text-red-600"
                            >
                                置顶
                            </span>
                            <span
                                v-else-if="isNew(item.createdAt)"
                                class="rounded bg-blue-100 px-1.5 py-0.5 text-xs font-medium text-blue-600"
                            >
                                新
                            </span>
                        </div>
                        <p class="truncate text-sm font-medium text-gray-900">
                            {{ item.title }}
                        </p>
                    </div>

                    <!-- 热度 -->
                    <span class="ml-2 whitespace-nowrap text-xs text-gray-500">
                        {{ formatHotScore(item.hotScore) }}
                    </span>
                </div>
            </li>
        </ul>

        <!-- <div class="border-t border-gray-100 px-4 py-2 text-center text-xs text-gray-400">每分钟更新</div> -->
        <div class="border-t border-gray-100 px-4 py-2 text-center text-xs text-gray-400"></div>
    </div>
</template>
